import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Table, Spin, Form, Row, Col, Input, Button, Dropdown, Menu, Icon, message, Modal, Select, Tree, TreeSelect, DatePicker, Checkbox, Tabs, InputNumber } from 'antd'
import _ from 'lodash'
import moment from 'moment'

import Ajax from 'lib/Ajax'
import { addConfig } from 'actions/config'
import ajaxUploader from 'lib/ajaxUploader'
import File from 'components/File'

const Option = Select.Option;
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;

// 新建编辑
class Edit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      file: ""
    }
  }

  componentWillReceiveProps(nextProps){
    if(!nextProps.visible){
      this.props.form.resetFields();
    }
  }

  handleCommit = () => {
    var self = this;
    self.props.form.validateFields((err, values) => {
      if(err == null){
        self.setState({
          loading: true
        });
        const { type, rowdata } = this.props;
        if(type == 'edit'){
          self.props.onOk(type, Object.assign(this.props.rowdata, values));
        }else{
          if(this.state.file){
            ajaxUploader({
              action: '/project/uploadAttach',
              filename: 'file',
              file: this.state.file,
              data: values,
              onSuccess: function(response, file){
                // console.log(response);
                if(response.status){
                  self.props.onOk(type, response.data);
                }else{
                  message.error('上传失败');
                }
              },
              onError: function(error){
                message.error('上传失败');
              },
              finally: function(){
                self.setState({
                  loading: false
                });
              }
            });
          }
        }
        
      }
    });
  }

  onCancel = ()=>{
    this.setState({
      loading: false
    });
    this.props.onCancel();
  }

  onChange = (file)=>{
    this.setState({
      file: file
    });
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
    };
    const { visible, type, rowdata } = this.props;
    const { attachTypeCode } = this.props.config;
    return (<Modal 
              title={ type == 'edit'?"上传文件":"修改文件" }
              visible={visible}
              onOk={ this.handleCommit } 
              onCancel={ this.onCancel }
              okText="确定" 
              cancelText="取消"
            >
              <Form
                horizontal
              >
                <Row gutter={20}>
                  <Col span={20}>
                    <FormItem {...formItemLayout} label="附件类别">
                      {getFieldDecorator("attachTypeCode",{
                        rules: [{
                          initialValue: type == 'edit'?rowdata.attachTypeCode:"",
                          required: true, message: '请选择附件类别',
                        }]
                      })(
                        <Select>
                          {
                            (attachTypeCode||[]).map(function(obj){
                              return (<Option key={obj.dictionaryId} value={ obj.dictionaryCode }>{ obj.dictionaryName }</Option>)
                            })
                          }
                        </Select>
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row gutter={20}>
                  <Col span={20}>
                    <FormItem {...formItemLayout} label="附件名称">
                      {getFieldDecorator("attachName", {
                        initialValue: type == 'edit'?rowdata.attachName:"",
                      })(
                        <Input />
                      )}
                    </FormItem>
                  </Col>
                </Row>
                <Row gutter={20}>
                  <Col span={20}>
                    {type == 'edit'?(
                      <FormItem {...formItemLayout} label="文件地址">
                        { rowdata.attachUrl }
                      </FormItem>
                    ):(
                      <FormItem {...formItemLayout} label="请选择文件">
                        <File 
                          onChange={this.onChange}
                          visible={visible}
                        />
                      </FormItem>
                    )}
                  </Col>
                </Row>
              </Form>
            </Modal>);
  }
}

function mapStateToProps(state) {
  return {
    config: state.config
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ addConfig }, dispatch)
}

module.exports = connect(mapStateToProps,mapDispatchToProps)(Form.create()(Edit)) 